import {Table, Column, Cell, HeaderCell, TablePagination} from  './../../rsuite/table/';

import URL from './../../libs/Url';
import lang from './../../libs/i18';
import Const from './../../libs/const';
import F from './../../libs/fetch';

let DateCell = ({rowData, dataKey, ...props}) => (
    <Cell {...props} >
        {Moment(rowData[dataKey]).format('LL') }
    </Cell>
);
let OperateCell = ({rowData, dataKey, ...props}) => (
    <Cell {...props}>
        <button class="btn btn-default btn-xs" type="button">查</button>
        <button class="btn btn-default btn-xs" type="button">改</button>
        <button class="btn btn-default btn-xs" type="button">删</button>
    </Cell>
);

function formatLengthMenu(lengthMenu) {
    return (
        <div className="table-length">
            <span>{lang.pagination.page_size_start}{lengthMenu}{lang.pagination.page_size_end}</span>
        </div>
    );
}

function formatInfo(total, activePage) {
    return (
        <span>{lang.pagination.total_size_start}<i>{total}</i>{lang.pagination.total_size_end}</span>
    );
}

const IndexFrom = React.createClass({

    loadData(inputData) {
        var self = this;
        var xhrData = Object.assign({}, {
            // currentPage: this.currentPage,
            // pageSize: this.pageSize,
            keyword: 'asdfasfd',
            // state: ''
        }, inputData);
        F.fetch(URL.NEWS_FIND, {method: 'POST', body: xhrData}).then((res) => {
            if (Const.SUCCESS_CODE == res.result.retCode) {
                self.setState(Object.assign({}, {data: res.result.data.news}, {page: res.result.data.page}));
                return true;
            } else {
                return self.setState(Object.assign({}, {data: []}));
            }
        }).catch((e) => {
            console.log(e);
        });
    },

    getInitialState() {
        return {
            data:[],
            page: {
                currentPage:1,
                pageSize: 10,
                totalSize: 0
            }
        }
    },
    componentDidMount(){
        this.loadData({});
    },
    handleChangePage(currentPage) {
        this.loadData({currentPage: currentPage});
    },
    handleChangeLength(pageSize) {
        this.loadData({currentPage: 1, pageSize: pageSize});
    },
    render() {
        var self = this;
        const {data} = this.state;
        return (
            <div>
                <Table height={window.innerHeight - 250} data={data} resizable>

                    <Column width={60} fixed>
                        <HeaderCell>{lang.news.table_index}</HeaderCell>
                        <Cell dataKey='rowIndex'/>
                    </Column>
                    <Column width={250} resizable>
                        <HeaderCell>{lang.news.table_title}</HeaderCell>
                        <Cell dataKey='title'/>
                    </Column>
                    <Column width={140} resizable>
                        <HeaderCell>{lang.news.table_classify}</HeaderCell>
                        <Cell dataKey="classifyid"/>
                    </Column>

                    <Column width={140} resizable>
                        <HeaderCell>{lang.news.table_publishTime}</HeaderCell>
                        <DateCell dataKey="intime"/>
                    </Column>
                    <Column width={200} resizable>
                        <HeaderCell>{lang.news.table_operate}</HeaderCell>
                        <OperateCell dataKey="operate"/>
                    </Column>
                </Table>

                <TablePagination
                    formatLengthMenu={formatLengthMenu}
                    formatInfo={formatInfo}
                    displayLength={self.state.page.pageSize}
                    total={self.state.page.totalSize}
                    onChangePage={this.handleChangePage}
                    onChangeLength={this.handleChangeLength}
                />
            </div>
        );
    }
});

export default IndexFrom;